<template>
  <div id="firstPage" ref="firstPage">
    <SearchForm
      v-model="ruleForm"
      :config="config"
      :dataJ="dataJ"
      @search-form="handleSearch"
    />
    <BkBtn :btnConfig="btnConfig" />
    <div style="height: calc(100vh - 300px)">
      <BkTable
        :tableHead="tableJ"
        :tableData="tableData"
        :total="total"
        :page="page"
        @getList="getList"
      >
        <template slot="dictType" slot-scope="scope">
          <el-button type="text" @click="showPage(scope.row)">{{
            scope.row.dictType
          }}</el-button>
        </template>
      </BkTable>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="500px"
      :before-close="dialogClosed"
    >
      <div slot="title" class="dialog-title">
        <span>{{ dialogTitle }}</span>
      </div>
      <el-form
        :inline="true"
        :model="Form"
        :rules="rules"
        ref="Form"
        class="el-form-item_block"
        size="small"
      >
        <el-form-item
          label="字典名称"
          label-width="100px"
          prop="dictName"
          class="el-form-item"
        >
          <el-input
            v-model.trim="Form.dictName"
            placeholder="请输入字典名称"
            maxlength="20"
            show-word-limit
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="字典类型" label-width="100px" prop="dictType">
          <el-input
            v-model.trim="Form.dictType"
            placeholder="请输入字典类型"
            oninput="value=value.replace(/[^a-zA-Z_]/g,'')"
            maxlength="40"
            show-word-limit
            clearable
            :disabled="this.operateType == 'edit'"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="状态" label-width="100px" prop="status">
          <el-select v-model="Form.status" size="small">
            <el-option
              :label="option.label"
              :value="option.value"
              :key="option.value"
              v-for="option in status"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" label-width="100px" prop="remark">
          <el-input
            v-model.trim="Form.remark"
            type="textarea"
            placeholder="请输入备注"
            maxlength="200"
            show-word-limit
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClosed" type="info" plain size="small"
          >取消</el-button
        >
        <el-button @click="submitForm('Form')" type="primary" size="small"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {
//   creatSysDict,
//   getDictList,
//   deteleSysDict,
//   changeStatus1
// } from "../api/sysDic";
import { getDictList, saveDict, updateDict, deleteDict } from "@/api/dict";
export default {
  name: "firstPage",
  data() {
    let valid1 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入字典名称"));
      }
      let PhoneReg = /^[\u4e00-\u9fa5]+$/;
      let IFlag = PhoneReg.test(value);
      if (!IFlag) {
        callback(new Error("请输入中文！"));
      } else {
        callback();
      }
    };
    return {
      config: {
        autoWidth: "22%",
      },
      status1: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "启用",
          value: 1,
        },
        {
          label: "停用",
          value: 0,
        },
      ],
      status: [
        {
          label: "启用",
          value: 1,
        },
        {
          label: "停用",
          value: 0,
        },
      ],
      tableData: [],
      total: 0,
      operateType: "",
      dialogVisible: false,
      dialogTitle: "",
      rules: {
        dictName: [
          {
            required: true,
            validator: valid1,
            // message: "请输入字典名称",
            trigger: "blur",
          },
        ],
        dictType: [
          {
            required: true,
            message: "请输入字典类型",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: false,
            message: "",
            trigger: "",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
      },
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      pageSizes: [10, 30, 50, 100],
      sysId: "",
      Form: {
        dictName: "",
        dictType: "",
        status: 1,
        remark: "",
      },
      ruleForm: {
        dictName: "",
        dictType: "",
        status: "",
        date: [],
      },
    };
  },
  computed: {
    btnConfig() {
      return [
        {
          label: "新增",
          Fn: this.addData,
        },
      ];
    },
    dataJ() {
      return [
        {
          label: "字典名称",
          labelWidth: "70px",
          prop: "dictName",
          type: "input",
          placeholder: "请输入字典名称",
        },
        {
          label: "字典类型",
          labelWidth: "70px",
          prop: "dictType",
          type: "input",
          placeholder: "请输入字典类型",
        },
        {
          label: "状态",
          labelWidth: "70px",
          prop: "status",
          type: "select",
          placeholder: "请选择状态",
          options: this.status1,
        },
        {
          label: "创建日期",
          labelWidth: "70px",
          prop: "date",
          type: "daterange",
        },
      ];
    },
    tableJ() {
      return [
        {
          prop: "dictName",
          label: "字典名称",
        },
        {
          prop: "dictType",
          label: "字典类型",
          nameSlot: true,
        },
        {
          prop: "status",
          label: "状态",
          type: "switch",
          activeColor: "#165DFF",
          inactiveColor: "rgba(0, 0, 0, 0.15)",
          activeValue: 1,
          inactiveValue: 0,
          change: (row, index, prop) => {
            this.changeEnabled(row);
          },
        },
        {
          prop: "remark",
          label: "备注",
        },
        {
          prop: "createTime",
          label: "创建时间",
        },
        {
          label: "操作",
          width: "120px",
          align: "center",
          btnList: [
            {
              name: "编辑",
              type: "text",
              // permissionValue: "sys:systemManage:sysDict:edit",
              handleClick: (val) => {
                this.edit(val);
              },
              isShow: (val) => {
                if (val.lockUpdate == 2) return false;
                else return true;
              },
            },
            {
              name: "删除",
              type: "text",
              // permissionValue: "sys:systemManage:sysDict:delete",
              handleClick: (val) => {
                this.del(val);
              },
              isShow: (val) => {
                if (val.lockUpdate == 2) return false;
                else return true;
              },
            },
          ],
        },
      ];
    },
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.getList();
    }, 1);
  },
  methods: {
    changeEnabled(row) {
      let params1 = {
        ids: [row.id],
        status: row.status,
      };
      changeStatus1(params1).then((res) => {
        if (row.status == 0) {
          this.$message.success("启用成功");
        } else {
          this.$message.success("停用成功");
        }
        this.getList();
      });
    },
    showPage(row) {
      this.$emit("firstData", row);
    },
    getList() {
      getDictList({
        pageSize: this.page.pageSize,
        pageNum: this.page.pageNum,
        dictName: this.ruleForm.dictName,
        dictType: this.ruleForm.dictType,
        status: this.ruleForm.status,
        startDate:
          this.ruleForm.date && this.ruleForm.date.length
            ? this.ruleForm.date[0]
            : "",
        endDate:
          this.ruleForm.date && this.ruleForm.date.length
            ? this.ruleForm.date[1]
            : "",
      }).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    edit(row) {
      this.operateType = "edit";
      this.dialogTitle = "编辑字典";
      this.dialogVisible = true;
      this.Form = JSON.parse(JSON.stringify(row));
    },
    handleSearch() {
      this.page.pageNum = 1;
      this.getList();
    },
    del(row) {
      this.$confirm("确认删除该条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDict({ id: row._id }).then((res) => {
            this.$message.success("删除成功");
            this.dialogVisible = false;
            this.page.pageNum = 1;
            this.getList();
          });
        })
        .catch(() => {});
    },
    addData() {
      this.operateType = "add";
      this.dialogTitle = "新增字典";
      this.dialogVisible = true;
    },
    dialogClosed() {
      this.Form = this.$options.data().Form;
      this.$refs["Form"].clearValidate();
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveForm();
        } else {
          return false;
        }
      });
    },
    saveForm() {
      if (this.operateType === "add") {
        saveDict({
          dictName: this.Form.dictName,
          remark: this.Form.remark,
          status: this.Form.status,
          dictType: this.Form.dictType,
        }).then((res) => {
          this.$message.success("新增成功");
          this.dialogClosed();
          this.getList();
        });
      } else {
        updateDict({
          ...this.Form,
        }).then((res) => {
          this.$message.success("修改成功");
          this.dialogClosed();
          this.getList();
        });
      }
    },
  },
};
</script>

<style lang="less">
#firstPage {
  flex: 1;
  .page {
    margin-top: 10px;

    .el-pagination {
      text-align: right;
    }
  }

  .bk-btn-box {
  }

  .el-table {
    &:before {
      content: "";
      height: 0;
    }

    .cell {
      height: 32px;
      line-height: 32px;

      .table-column {
        display: inline-block;
      }

      .el-button {
        text-decoration: none;
        color: #165dff;
        cursor: pointer;
        font-size: 14px;
      }
    }

    .el-table__header-wrapper .has-gutter .el-table__cell {
      background: rgb(243, 243, 245);
      padding: 6px 0px;
      color: rgb(51, 51, 51);
      border-right: none;
    }

    .el-table__body-wrapper .el-table__row .el-table__cell {
      padding: 6px 0px;
      color: rgb(102, 102, 102);
      border-right: none;
    }

    .grade {
      color: #409eff;
      cursor: pointer;
    }
  }

  .searchForm {
    padding-top: 0;
  }
}
</style>
